<template>
	<view class="index">
		<!-- #ifdef MP-WEIXIN -->
		<view class="input-view">
			<uni-icons class="input-uni-icon" type="search" size="24" color="#999" />
			<input confirm-type="search" class="nav-bar-input" :disabled="true" type="text" placeholder="输入搜索关键词"
				@tap="goSearch" />
		</view>
		<!-- #endif -->
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollInitIndex">
			<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index"
				@tap="changTab(index)">
				<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangTab" :current="topBarIndex" class="scroll-height">
			<swiper-item v-for="(item,index) in newTopBar" :key="index">
				<scroll-view scroll-y="true" class="scroll-height" @scrolltolower="loadMore(index)">
					<block v-for="(k,i) in item.data" :key="i" v-if="item.data.length">
						<!-- 首页推荐 -->
						<indexSwitch v-if="k.type === 'swiperList'" :dataList=k.data />
						<template v-if="k.type === 'recommendList'">
							<recommend :dataList=k.data />
							<Card cardTitle="猜你喜欢" />
						</template>

						<!-- 其他分类 -->
						<Banner v-if="k.type === 'bannerList'" :dataList='k.imgUrl' />
						<template v-if="k.type === 'iconsList'">
							<Icons :dataList='k.data' />
							<Card cardTitle="热销爆品" :dataList='k.data' />
						</template>
						<template v-if="k.type === 'hotList'">
							<Hot :dataList='k.data' />
							<Card cardTitle="推荐商铺" />
						</template>
						<template v-if="k.type === 'shopList'">
							<Shop :dataList='k.data' />
							<Card cardTitle="为您推荐" />
						</template>

						<!-- 公用模块 -->
						<CommodityList v-if="k.type === 'commodityList'" :dataList=k.data />
					</block>
					<view v-else>
						{{hint}}
					</view>
					<view class="loda-text f-color" v-if="newTopBar[index].data.length">
						{{item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<tabBar currentPage="index" />
	</view>

</template>

<script>
	import indexSwitch from '@/components/indexSwitch/indexSwitch';
	import recommend from '@/components/recommend/recommend';
	import Card from '@/components/Card/Card.vue';
	import CommodityList from '@/components/CommodityList/CommodityList.vue';
	import Icons from "@/components/Icons/Icons.vue";
	import Banner from "@/components/Banner/Banner.vue"
	import Hot from "@/components/Hot/Hot.vue"
	import Shop from "@/components/Shop/Shop.vue"
	import $http from "@/common/api/request.js"
	import tabBar from "@/components/tabBar/tabBar.vue"
	export default {
		data() {
			return {
				topBarIndex: 0,
				clentHeight: 0,
				scrollInitIndex: 'top0',
				topBar: [],
				newTopBar: [],
				hint: ''
			}
		},
		onLoad() {
			this.__info();
		},
		onReady() {
		},
		//标题栏按钮点击
		onNavigationBarButtonTap(e) {
			if (e.float == 'left') { //左边的搜索按钮
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		methods: {
			//点击导航栏,让滑块对应跟随	
			changTab(index) {
				if (this.topBarIndex == index) {
					return
				}
				this.topBarIndex = index
				this.scrollInitIndex = 'top' + index
				if (this.newTopBar[index].load == 'first') {
					this.addData()
				}
			},
			//使滑动和顶部导航栏对应
			onChangTab(e) {
				this.changTab(e.detail.current)
			},
			//获取数据
			__info() {
				$http.request({
					url: "/index_list/data"
				}).then(res => {
					let data = res.data.data
					this.topBar = data.topBar
					this.newTopBar = this.initData(data)
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			//处理滑块的数据
			initData(res) {
				let arr = []
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load: 'first',
						loadText: '上拉加载更多...'
					}
					if (i === 0) {
						obj.data = res.data
					}
					arr.push(obj)
				}
				return arr
			},
			//处理滑动高度
			getClientHeight() {
				//获取系统信息
				const info = uni.getSystemInfoSync()
				//info.windowHeight: 获取可视化区域的高度,app会包含状态栏,小程序,H5不包含状态栏
				//info.statusBarHeight:获取状态栏的高度, app,小程序状态栏的高度,浏览器没有就是0
				// #ifdef APP-PLUS
				//app可视区域高度 - 状态栏高度 - 44(默认的navBar高度) - 自定义导航条的高度 uni.upx2px(80):rpx转xp,实际就是/2
				this.clentHeight = info.windowHeight - info.statusBarHeight - 44 - uni.upx2px(80) - uni.upx2px(120) + 'px';
				// #endif
				// 	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 	console.log(menuButtonInfo);
				// #ifdef MP-WEIXIN
				this.clentHeight = info.windowHeight - uni.upx2px(284) + 'px';
				// #endif
				// #ifdef H5
				//小程序和H5因为获取的可视区域高度不包含状态栏,所以只减去自定义组件的高度就行了
				this.clentHeight = info.windowHeight - uni.upx2px(200) + 'px';
				// #endif
			},
			//首页分页的数据
			addData(callback) {
				//获取index
				let index = this.topBarIndex
				if (index >= 3) {
					return this.hint = '暂无数据...'
				}
				//获取id
				let id = this.topBar[index].id
				//获取下拉加载id
				let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1
				//通过id请求不同的数据
				$http.request({
					url: `/index_list/${id}/data/${page}`,
				}).then(res => {
					let data = res.data.data
					this.newTopBar[index].data = [...this.newTopBar[index].data, ...data]
				}).catch(err => {
					this.newTopBar[index].loadText = "没有更多了..."
					uni.showToast({
						title: "没有更多了",
						icon: "none"
					})
				});
				this.newTopBar[index].load = 'last'
				if (typeof callback == 'function') {
					callback()
				}
			},
			//滚动触底加载跟多
			loadMore(index) {
				//下拉到底文字换成加载中...
				//this.newTopBar[index].loadText = "加载中..."
				//请求结束,让文字切换成 上拉加载跟对...
				this.addData(() => {
					this.newTopBar[index].loadText = "上拉加载更多..."
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		},
		components: {
			indexSwitch,
			recommend,
			Card,
			CommodityList,
			Hot
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.scroll-height {
			/* #ifdef APP-PLUS */
			height: calc(100vh - 120rpx - 80rpx);
			/* #endif */
			/* #ifdef H5 */
			height: calc(100vh - 120rpx - 44px - 80rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 120rpx - 42px - 80rpx);
			/* #endif */
		}

		/* #ifdef MP-WEIXIN */
		.input-view {
			display: flex;
			align-items: center;
			border-radius: 30rpx;
			width: 100%;
			height: 64rpx;
			margin: 10rpx 0;
			background-color: rgb(247, 247, 247);
			box-sizing: border-box;
			padding: 0 20rpx;

			.nav-bar-input {
				margin-left: 20rpx;
			}
		}

		/* #endif */
		padding-bottom: 120rpx;

		// 头部导航条
		.scroll-content {
			width: 100%;
			height: 80rpx;
			white-space: nowrap;

			.scroll-item {
				display: inline-block;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 6rpx solid #49BDFB;
			}
		}

		.loda-text {
			box-sizing: border-box;
			border-top: 2rpx solid #636263;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>
